<template>
	<div class="ebook" ref="ebook">
		<ebook-bookmark></ebook-bookmark>
		<ebook-header></ebook-header>
		<ebook-title></ebook-title>
		<ebook-reader></ebook-reader>
		<ebook-menu></ebook-menu>
		<ebook-footer></ebook-footer>
		<div class="book-mask-wrapper" v-show="!bookShow">
			<div class="book-mask"><ebook-loading/></div>
		</div>
	</div>
</template>

<script>
	import EbookReader from 'components/ebook/EbookReader'
	import EbookTitle from 'components/ebook/EbookTitle'
	import EbookMenu from 'components/ebook/EbookMenu'
	import EbookBookmark from 'components/ebook/EbookBookmark'
	import EbookHeader from 'components/ebook/EbookHeader'
	import EbookFooter from 'components/ebook/EbookFooter'
	import EbookLoading from 'components/ebook/EbookLoading'

	import { getReadTime, saveReadTime } from 'utils/localStorage'
	import { ebookMixin } from 'utils/mixin'
	import { getCurrentBook } from 'utils/localStorage'

	export default {
		name: "index",
		mixins: [ebookMixin],
		components: {
			EbookReader,
			EbookTitle,
			EbookMenu,
			EbookBookmark,
			EbookHeader,
			EbookFooter,
			EbookLoading
		},
		watch: {
			offsetY(v) {
				if (!this.menuVisible && this.bookAvailable) {
					if (v > 0) {
						this.move(v)
					} else if (v === 0) {
						this.restore()
					}
				}
			}
		},
		methods: {
			move(v) {
				this.$refs.ebook.style.top = v + 'px'
			},
			restore(v) {
				this.$refs.ebook.style.top = 0 + 'px'
				this.$refs.ebook.style.transition = 'all .2s linear'
				setTimeout(() => {
					this.$refs.ebook.style.transition = ''
				}, 200)
			},
			startLoopReadTime() {
				let readTime = getReadTime(this.fileName)
				if (!readTime) {
					readTime = 0
				}
				this.task = setInterval(() => {
					readTime++
					if (readTime % 30 === 0) {
						saveReadTime(this.fileName, readTime)
					}
				}, 1000)
			},
		},
		mounted() {
			this.startLoopReadTime()
		},
		beforeDestroy() {
			if (this.task) {
				clearInterval(this.task)
			}
		}
	}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';
	
.ebook {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .book-mask-wrapper {
  	position: absolute;
  	top: 0;
	  left: 0;
  	z-index: 500;
  	width: 100%;
  	height: 100%;
  	background: #c6c2b6;
	  .book-mask {
	  	position: absolute;
	  	top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	  }
  }
}
</style>